<template>
  <view class="UserTeam animate__animated animate__bounceInUp" @click="skipToTeamDetail">
    <view class="title">{{ teamDetail.title }}</view>
    <view class="introduce">{{ teamDetail.introduce }}</view>
    <view class="tags">
      <van-tag
        v-for="(item, index) in teamDetail.tags"
        :key="index"
        size="medium"
        style="margin-right: 10rpx"
        >{{ item }}</van-tag
      >
    </view>
    <view class="people"
      >人数：{{ teamDetail.userList.length + 1 }} /
      {{ teamDetail.number }}</view
    >
    <view class="time"
      >发布时间：{{ $formatTime.formatTimeToHHMM(teamDetail.createTime) }}</view
    >

    <view class="tipTag" style="background: #05a47d" v-if="isFull">满员</view>
    <view class="tipTag" style="background: #dd6161" v-if="isPrivate"
      >私密</view
    >
  </view>
</template>

<script>
export default {
  name: "UserTeam",
  props: {
    teamDetail: {
      type: Object,
      required: true,
    },
  },
  mounted() {
    this.initStatus();
  },
  data() {
    return {
      isFull: false,
      isPrivate: false,
    };
  },
  methods: {
    initStatus() {
      // 队伍已满
      if (this.teamDetail.number === this.teamDetail.userList.length + 1) {
        this.isFull = true;
        return;
      }
      // 队伍设置私密
      if (this.teamDetail.password.length) {
        this.isPrivate = true;
      }
    },
    
    skipToTeamDetail() {
      uni.navigateTo({
        url: `/pages/TeamInfo/TeamInfo?teamDetail=${encodeURIComponent(
          JSON.stringify(this.teamDetail)
        )}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.UserTeam {
  position: relative;
  padding: 20rpx;
  margin-bottom: 40rpx;
  background-color: #fff;
  border-radius: 10rpx;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  color: #aaa;
  overflow: hidden;
  .title {
    font-size: 36rpx;
    font-weight: 500;
    color: #000;
  }
  .introduce {
    width: 100%;
    margin: 10rpx 0;
    font-size: 30rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .time,
  .people {
    font-size: 26rpx;
    margin-top: 10rpx;
  }
  .tipTag {
    position: absolute;
    box-sizing: border-box;
    width: 200rpx;
    display: flex;
    justify-content: center;
    align-content: center;
    padding: 10rpx 20rpx;
    color: #fff;
    right: -50rpx;
    top: 20rpx;
    font-size: 26rpx;
    transform: rotate(45deg);
  }
}
</style>
